<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>补间动画</title>
    <style>
        body{margin: 0;overflow: hidden}
        #canvas{background: antiquewhite;}
    </style>
</head>
<body>
<canvas id="canvas"></canvas>
<script src="./js/Tween.js"></script>
<script>
    const [width,height]=[window.innerWidth,window.innerHeight];
    const canvas=document.getElementById('canvas');
    canvas.width=width;
    canvas.height=height;
    const  ctx=canvas.getContext('2d');

    //小球对象化
    class Ball{
        constructor(r,color='#000'){
            this.color=color;
            this.r=r;
            this.x=0;
            this.y=0;
        }
        draw(ctx){
            ctx.save();
            ctx.beginPath();
            ctx.fillStyle=this.color;
            ctx.arc(this.x,this.y,this.r,0,Math.PI*2);
            ctx.fill();
            ctx.restore();
        }
    }

    //实例化小球
    const ball=new Ball(15);
    ball.x=width/2;
    ball.y=50;



    //实例化Tween 对象,为其添加目标对象
    const tween=new TWEEN.Tween(ball);

    //设置目标对象一段时间后的状态to({ key:val }, 时间长度)
    tween.to({y:600,color:'red'},2000);

    //开始计时 start()
    tween.start();

    //重复 repeat(Infinity)
    tween.repeat(Infinity);

    //悠悠球 yoyo(true)
    // tween.yoyo(true);

    //设置插值 easing()
    //Linear, Quadratic, Cubic, Quartic, Quintic, Sinusoidal, Exponential, Circular, Elastic, Back,Bounce
    tween.easing(TWEEN.Easing.Bounce.Out);

    //事件监听
    //onStart, onStop, onUpdate, onComplete
    tween.onUpdate(function(){
        console.log(this.y);
    });



    //渲染方法
    !(function render(){
        //TWEEN 更新目标目标对象的状态
        TWEEN.update();

        //擦除
        ctx.clearRect(0,0,width,height);
        //绘图
        ball.draw(ctx);
        //递归调用render 函数
        window.requestAnimationFrame(render);
    })()
</script>
</body>
</html>
